<template>
  <div>
    <p>Child</p>
    <p>{{ msg }}</p>
    <p>{{ foods }}</p>
    <p>{{ num }}</p>
    <p>{{ person }}</p>
    <!-- <p>下面是props里面没有写的</p> -->
    <!-- {{ $attrs.person }} -->
    <!-- <button @click="change">尝试更改父组件传递过来的值</button> -->
    <button @click="sendValue">传值给父组件</button>
  </div>
</template>

<script>
export default {
  // 这样写没发具体去实现对传递值的约束
  //   props: ['msg', 'foods', 'number', 'isMan']
  props: {
    // msg: String, // Vue2中类型约束是大写
    msg: {
      type: String,
      required: true // 非空约束
    },
    foods: Array, // 数组
    // num: Number,
    // num如果传递了，必须是一个数值，没有传递，我希望给它一个默认值
    num: {
      type: Number,
      default: 100 // 默认值
    },
    isMan: Boolean,
    // 对person的约束（它的类型是对象，如果没有传递，给它一个默认值 name:lisi age:100）
    person: {
      type: Object,
      // 如果是引用类型（对象、数组、函数），它的默认值必须写在一个箭头函数中
      default: () => {
        return {
          name: 'lisi',
          age: 100
        }
      }
    }
  },
  methods: {
    change () {
      // Vue不推荐在子组件中，直接更改父组件的值，
      //   this.msg = '你好'
    },
    sendValue () {
      // 子组件固定写法（通过触发自定义事件来实现）
      /**
       * 参数1：自定义事件名：不要和系统的冲突了 myevent
       * 参数2：要传递给父组件的值（类型任意）
       */
      this.$emit('myevent', { name: '李斯', address: '咸阳' }) // ---> getValue({ name: '李斯', address: '咸阳' })
    }
  }
}
</script>
